<template>
	<view class="">
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
			<swiper-item class="zbc" v-for="(item,index) in baseConfig.carouselChart" :key="index"
				:class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>

		<view>
			<uni-notice-bar show-icon scrollable background-color="#fff" color="#0081FF" :text="baseConfig.notice" />
		</view>

		<view style="margin-top: 18px;">
			<view class="header flex justify-between align-center">
				<view class="cu-capsule">
					<view class='cu-tag bg-blue'>
						<text class='cuIcon-evaluate_fill'></text>
					</view>
					<view class="cu-tag line-blue">
						最新发布
					</view>
				</view>
				<text class="text-grey" @click="toSearch">查看更多 <text class="cuIcon-right margin-left-xs"></text></text>
			</view>
			<view class="list flex flex-direction flex-gap-sm margin-top-sm">
				<view class="item flex flex-gap-sm padding-sm radius2"
					style="background-color: #fff;" v-for="item in articleList" :key="item.id"
					@click="toDetail(item.id)">
					<img :src="item.cover.url" style="width: 120px;height: 80px;border-radius: 2px;" />
					<view class="flex-sub flex flex-direction justify-between">
						<text class="text-df justify-between text-black">{{item.title}}</text>
						<view class="flex flex-gap-xs">
							<text class="cu-tag sm light bg-blue" v-for="(item,index) in item.tags">{{item}}</text>
						</view>
						<view class="flex align-center justify-between text-grey">
							<text v-if="item.price===0" class="text-green">免费</text>
							<text v-else class="text-orange">{{item.price}}金豆</text>
							<text><text class="cuIcon-attention margin-right-xs"></text> {{item.viewCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import articleApi from "@/api/articleApi.js"

	export default {
		data() {
			return {
				cardCur: 0,
				articleList: [],
				baseConfig: {}
			}
		},
		onLoad() {
			articleApi.getLatestArticle().then(res => {
				this.articleList = res.data
			})
			this.baseConfig = this.$store.state
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			toSearch() {
				uni.switchTab({
					url: '/pages/search/search'
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 12px;
		padding-top: 0;
	}
	
	.card-swiper swiper-item {
		width: 314px !important;
		left: 0;
		padding: 12px 0 26px 0;
	}

	.uni-noticebar {
		margin-bottom: 0 !important;
	}
</style>